<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!--    头部-->
    <i th:replace="~{common :: head}"></i>

    <div style="background-color:#eeeeee;">
    <!-- 内容主体区域 -->
    <div style="background-color:white; width: 100%;height: 5%;padding-left: 70px;padding-top: 5px" >
        <span class="layui-breadcrumb" >
            <a href="" style="font-size: 20px">采购管理</a>
            <a href="" style="font-size: 20px">物资需求分析</a>
        </span>
    </div>

    <div style="background-color:white; width: 90%; height: 650px;margin-top: 2%;margin-left: 4% ; padding-left: 3%;padding-top: 3%">
        <!--数据信息-->
        <!--查询条件-->

        <div>
            <form class="layui-form" action="">
                <div class="layui-form-item">

                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" id="orderId"  placeholder="请输入订单编号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" id="principal"  placeholder="请输入负责人名称" class="layui-input">
                        </div>
                    </div>

                    <button type="button" class="layui-btn layui-btn-normal" id="selectBut">查询</button>
                </div>
            </form>
        </div>
        <!--展示数据-->
        <div>

            <table class="layui-hide" id="orders" lay-filter="orders" align="center"></table>
            <!--        表格头部工具栏-->
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
                </div>
            </script>
            <!--        表格右侧操作栏-->
            <script type="text/html" id="barDemo">
                <button class="layui-btn                  layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
                <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="create"><i class="layui-icon layui-icon-templeate-1"></i>生成采购单</button>
                <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="production"><i class="layui-icon layui-icon-template-1"></i>开始生产</button>
            </script>
        </div>


    </div>

</div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    //JavaScript代码区域
    layui.use(['element','table','form'], function(){
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;


        //表格初始化
        table.render({
            elem: '#orders'
            ,url:baseUrl+'procurement/orders/list'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,width: 1450
            ,toolbar: '#toolbarDemo'
            ,cols: [[
                {field:'id', width:200, title: '订单编号', sort: true}
                ,{field:'lining', width:150, title: '所需面料'}
                ,{field:'liningNum', width:100, title: '面料数量'}
                ,{field:'liningSubtotal', width:100, title: '面料价格'}
                ,{field:'ingredients', width:180, title: '所需辅料'}
                ,{field:'ingredientsNum', width:100, title: '辅料数量'}
                ,{field:'ingredientsSubtotal', width:100, title: '辅料价格'}
                ,{field:'procurementStatus', width:100, title: '采购状态',hide:true}
                ,{field:'productionStatus', width:100, title: '生产状态',hide:true}

                ,{field:'total', width:100, title: '总计'}
                ,{field:'principal', width:100, title: '负责人'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:300}

            ]]
            ,page:true
            ,where: {
                orderId:$("#orderId").val(),
                principal:$("#principal").val()

        } //设定异步数据接口的额外参数

    });


        //查询指定条件
        $("#selectBut").click(function () {

            table.reload('orders', {
                url: baseUrl+'procurement/orders/list'
                ,where: {
                    orderId:$("#orderId").val(),
                    principal:$("#principal").val()

                } //设定异步数据接口的额外参数

            });


        });


        //行工具栏事件
        table.on('tool(orders)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）


            if(layEvent === 'edit'){ //编辑
                 if (data.procurementStatus == 1){
                     layer.msg('该订单已生成采购单，无法再次编辑', {
                         icon: 2,
                         time: 2000 //2秒关闭（如果不配置，默认是3秒）
                     }, function(){
                         //do something
                     });
                     return;
                 }
                layer.open({
                    title: '编辑'
                    ,content: baseUrl+'procurement/orders/edit-ui?id='+data.id
                    ,type:2
                    ,area: ['1400px', '600px']
                    // 弹出层销毁时刷新表格数据
                    ,end:function () {
                        table.reload('orders', {//刷新表格数据
                            url: baseUrl+'procurement/orders/list'
                            ,where: {
                                orderId:$("#orderId").val(),
                                principal:$("#principal").val()

                            } //设定异步数据接口的额外参数

                        });
                    }
                })
                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
            else if(layEvent === 'create'){//生成采购单

                if (data.procurementStatus == 1){
                    layer.msg('该订单已生成采购单，无法再生成', {
                        icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //do something
                    });
                    return;
                }
                //发送ajax请求  编辑APP信息
                $.ajax({
                    url:baseUrl+"procurement/orders/addPurchaseOrders",
                    data:{id:data.id},
                    type:"post",
                    dataType:"json",
                    success:function (result) {
                        if (result.code==0){
                            layer.msg('采购单已生成', {
                                icon: 1,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                //do something
                            });
                            table.reload('orders', {//刷新表格数据
                                url: baseUrl+'procurement/orders/list'
                                ,where: {
                                    orderId:$("#orderId").val(),
                                    principal:$("#principal").val()

                                } //设定异步数据接口的额外参数

                            });
                        }else {
                            layer.open({
                                title: '编辑菜品信息'
                                ,content: result.msg
                            });
                        }
                    },
                    error:function () {
                        layer.msg("服务器原地爆炸,请联系管理员!!!");
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。



            }

            else if(layEvent === 'production'){//生成采购单

                if (data.procurementStatus == 0){
                    layer.msg('请先生成采购单，再加入生产', {
                        icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //do something
                    });
                    return;
                }
                if (data.productionStatus == 1){
                    layer.msg('该订单已经在生产中', {
                        icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //do something
                    });
                    return;
                }


                layer.open({
                    type: 2,
                    content: baseUrl+"production/management/add-ui?orderId="+data.id,
                    area: ['600px', '600px'],
                    end:function () {
                        table.reload('orders', {//刷新表格数据
                            url: baseUrl+'procurement/orders/list'
                            ,where: {
                                orderId:$("#orderId").val(),
                                principal:$("#principal").val()

                            } //设定异步数据接口的额外参数

                        });
                    }
                });



            }

        });





        //表头工具栏事件
        table.on('toolbar(orders)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2,
                        content: baseUrl+"procurement/orders/add-ui",
                        area: ['1400px', '600px'],
                        end:function () {
                            table.reload('orders', {//刷新表格数据
                                url: baseUrl+'procurement/orders/list'
                                ,where: {
                                    orderId:$("#orderId").val(),
                                    principal:$("#principal").val()

                                } //设定异步数据接口的额外参数

                            });
                        }
                    });
                    break;



            };
        });






    });
</script>
    <script type="text/html" id="sexTpl">
        {{#  if(d.sex === '女'){ }}
        <span style="color: #F581B1;">{{ d.sex }}</span>
        {{#  } else { }}
        {{ d.sex }}
        {{#  } }}
    </script>
<script type="text/html" id="statusTpl">
    {{#  if(d.statusString == '已离职'){ }}
    <span style="color: red;">{{ d.statusString }}</span>
    {{#  } else if(d.statusString === '请假中'){ }}
    <span style="color: yellowgreen;">{{ d.statusString }}</span>
    {{#  } else{ }}
    {{ d.statusString }}
    {{#  } }}

</script>
</body>
</html>
